<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <link rel="icon" type="image/svg+xml" href="https://www.aigctour.com/tourfly/favicon.ico" />
  <title>图蝇</title>
  <style>
    body {
      color: #2d2d2d;
      margin: 0;
      background-color: white;
      /* background-color: #e4d5cd; */
    }

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .loader {
      --dim: 2.5rem;
      width: var(--dim);
      height: var(--dim);
      position: relative;
      animation: spin988 2s linear infinite;
    }

    .loader .circle {
      --color: #ed7b1c;
      --dim: 1rem;
      width: var(--dim);
      height: var(--dim);
      background-color: var(--color);
      border-radius: 50%;
      position: absolute;
    }

    .loader .circle:nth-child(1) {
      top: 0;
      left: 0;
    }

    .loader .circle:nth-child(2) {
      top: 0;
      right: 0;
    }

    .loader .circle:nth-child(3) {
      bottom: 0;
      left: 0;
    }

    .loader .circle:nth-child(4) {
      bottom: 0;
      right: 0;
    }

    @keyframes spin988 {
      0% {
        transform: scale(1) rotate(0);
      }

      20%,
      25% {
        transform: scale(1.3) rotate(90deg);
      }

      45%,
      50% {
        transform: scale(1) rotate(180deg);
      }

      70%,
      75% {
        transform: scale(1.3) rotate(270deg);
      }

      95%,
      100% {
        transform: scale(1) rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <img style="display: none;" id="whiteLogo" src="https://aigc.aigctour.com/post/whitelogo.png">

  <div style="width:100%;height: 40px; display: flex;position: fixed;top: 0;z-index: 1;">
    <div style="
    margin: 0 10px;
    width: 120px;
    height: auto;
    background: center / contain no-repeat
      url('https://aigc.aigctour.com/post/tourfly.png');
  "></div>
  </div>
  <div style="width: 100%; min-height: 300px;margin-top: 40px; position: relative" class="flex-center">
    <div style="position: absolute; inset: auto" class="flex-center">
      <div class="loader" id="loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>

    <img id="imgView" class="img" crossorigin="anonymous"
      style="visibility: hidden; box-sizing: border-box; padding: 15px" width="100%" height="100%" />
  </div>
  <div class="text" id="text_tip" style="display: none;width: 100%; color: #2d2d2d; text-align: center;">
    <p>Press the image for a while to download</p>
    <p>长按图片下载</p>
  </div>
</body>
<script>


  function addLogo($img) {
    // 添加水印
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = $img.width;
    canvas.height = $img.height;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage($img, 0, 0, canvas.width, canvas.height);
    if (whiteLogo.complete) {
      ctx.drawImage(whiteLogo, 20, canvas.height - 40, whiteLogo.width / 2, whiteLogo.height / 2);
    } else {
      // 文字水印
      ctx.font = `bold 12px arial`;
      ctx.fillStyle = 'rgba(255, 255, 255, .6)';
      const text = '图蝇';
      ctx.fillText(text, 20, canvas.height - 20);
    }
    imgView.src = canvas.toDataURL()
  }

  const name = location.search.split('=')[1];
  const imgSrc = location.origin + '/outputs/' + name;
  // const imgSrc = 'https://www.aigctour.com/outputs/' + name;

  const img = new Image();
  img.setAttribute('crossOrigin', 'anonymous');
  img.src = imgSrc;
  img.onload = function () {
    addLogo(img)
    loader.style.display = 'none';
    imgView.style.visibility = '';
    text_tip.style.display = 'block';
  };

</script>

</html>